<template>
  <div class="table-wrap">
    <!--表格栏-->
    <el-table
      v-loading="loading"
      :data="tableList"
      :highlight-current-row="highlightCurrentRow"
      @selection-change="selectionChange"
      :element-loading-text="$t('action.loading')"
      :border="border"
      :stripe="stripe"
      :show-overflow-tooltip="showOverflowTooltip"
      :max-height="maxHeight"
      :size="size"
      :align="align"
      style="width:100%;"
      :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
    >
      <el-table-column type="selection" width="50" v-if="showSelection" fixed="left"></el-table-column>
      <el-table-column type="index" width="50" v-if="showIndex"></el-table-column>
      <!-- 表头部分 -->
      <template v-for="column in tableHeaderList">
        <el-table-column
          header-align="center"
          align="center"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth"
          :fixed="column.fixed"
          :key="column.prop"
          :type="column.type"
          :formatter="column.formatter"
        >
          <template slot-scope="scope">
            <template v-if="!column.render">
              <template v-if="column.formatter">
                <div
                  v-html="column.formatter(scope.row, column,scope.row[column.prop],scope.index)"
                ></div>
              </template>
              <template v-else>
                <span>{{scope.row[column.prop]}}</span>
              </template>
            </template>
            <template v-else>
              <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
            </template>
          </template>
        </el-table-column>
      </template>

      <!-- 操作部分 -->
      <el-table-column
        :label="$t('action.operation')"
        :width="operationWidth"
        fixed="right"
        v-if="showOperation"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <!-- 编辑按钮 -->
          <kt-button
            icon="fa fa-edit"
            :label="$t('action.edit')"
            :show="showEditOperation"
            :perms="permsEdit"
            :size="size"
            @click="handleEdit(scope.row)"
          />
          <!-- 删除按钮 -->
          <kt-button
            icon="fa fa-trash"
            :label="$t('action.delete')"
            :show="showDeleteOperation"
            :perms="permsDelete"
            :size="size"
            type="danger"
            @click="handleDelete(scope.row)"
          />
          <!-- 详情按钮 -->
          <kt-button
            icon="fa fa-search"
            :label="$t('action.detail')"
            :show="showDetailOperation"
            :size="size"
            type="success"
            @click="handleDetail(scope.row)"
          />
          <kt-button
            icon="fa fa-search"
            :label="'初盘'"
            :show="scope.row.checkStatus == 0"
            :size="size"
            type="success"
            @click="handleFirst(scope.row)"
          />
          <kt-button
            icon="fa fa-search"
            :label="'复盘'"
            :show="scope.row.checkStatus == 1"
            :size="size"
            type="success"
            @click="handleFinal(scope.row)"
          />
          <kt-button
            icon="fa fa-search"
            :label="'差异确认'"
            :show="scope.row.checkStatus == 2"
            :size="size"
            type="success"
            @click="handleConfirm(scope.row)"
          />
          <!-- 自定义按钮部分 -->
          <kt-button
            :label="customLabel"
            :show="showCustomOperation"
            :size="size"
            type="active"
            @click="handleCustom(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!--批量删除   分页栏-->
    <div class="toolbar">
      <!-- 批量删除按钮 -->
      <kt-button
        style="float:left;"
        v-if="showBatchDelete & showSelection"
        :label="$t('action.batchDelete')"
        :perms="permsDelete"
        :size="size"
        type="danger"
        @click="handleBatchDelete()"
        :disabled="this.selections.length===0"
      />
      <!-- 分页部分 -->
      <el-pagination
        style="float:right;"
        v-if="showPagenation"
        layout="total, prev, pager, next, jumper,sizes"
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.pageSize"
        :total="totalSize"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import { exportExcel } from "@/utils/excel";
import { formatDate } from "@/utils/datetime";

export default {
  name: "jicTable",
  components: {
    KtButton
  },
  props: {
    tableList: Array, // 列表数据
    tableHeaderList: Array, // 表格头部数据
    data: Object, // 表格分页数据
    permsEdit: String, // 编辑权限标识
    permsDelete: String, // 删除权限标识

    // 是否显示编辑按钮
    showEditOperation: {
      type: Boolean,
      default: false
    },

    // 是否显示删除按钮
    showDeleteOperation: {
      type: Boolean,
      default: false
    },

    // 是否显示详情按钮
    showDetailOperation: {
      type: Boolean,
      default: false
    },
    // 是否显示初盘按钮
    showFirstOperation: {
      type: Boolean,
      default: false
    },
    // 是否显示复盘按钮
    showFinalOperation: {
      type: Boolean,
      default: false
    },
    // 是否显示差异确认按钮
    showConfirmOperation: {
      type: Boolean,
      default: false
    },

    // 是否显示自定义按钮
    showCustomOperation: {
      type: Boolean,
      default: false
    },

    // 自定义按钮的名称
    customLabel: {
      type: String,
      default: "自定义名称"
    },

    // 列表左侧底部是否显示批量删除(判断的一部分)
    showBatchDelete: {
      type: Boolean,
      default: true
    },

    // 是否显示右侧操作部分
    showOperation: {
      type: Boolean,
      default: true
    },

    // 表格右侧操作部分宽度
    operationWidth: {
      type: Number,
      default: 185
    },

    // 是否显示分页
    showPagenation: {
      type: Boolean,
      default: true
    },

    // 是否在左侧显示下表(1,2,3,4,5...)
    showIndex: {
      type: Boolean,
      default: true
    },

    // 左侧显示选择功能
    showSelection: {
      type: Boolean,
      default: true
    },

    // table尺寸
    size: {
      type: String,
      default: "mini"
    },

    // table文本对齐方式
    align: {
      type: String,
      default: "left"
    },

    // table表格最大高度
    maxHeight: {
      type: Number,
      default: 1500
    },

    // table表格默认高度
    height: {
      type: Number,
      default: 500
    },

    // table是否显示边框
    border: {
      type: Boolean,
      default: false
    },

    // table是否显示斑马线
    stripe: {
      type: Boolean,
      default: true
    },

    // table是否高亮当前行
    highlightCurrentRow: {
      type: Boolean,
      default: true
    },

    // table是否单行显示
    showOverflowTooltip: {
      type: Boolean,
      default: true
    },

    /* 分页部分对应的数据 */
    totalSize: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 分页信息
      pageRequest: {
        pageNum: 1,
        pageSize: 10
      },
      loading: false, // 加载标识
      selections: [] // 批量选择选中数据
    };
  },
  methods: {
    // 点击编辑按钮触发方法
    handleEdit(row) {
      console.log(row, "-----------组件编辑按钮---------");
      this.$emit("handleEdit", { row: row });
    },

    // 点击删除按钮触发方法
    handleDelete(row) {
      console.log(row, "-----------组件删除按钮---------");
      this.$emit("handleDelete", { row: row });
    },

    // 点击批量删除按钮触发方法
    handleBatchDelete() {
      let ids = this.selections.map(item => item.id).toString();
      console.log(ids, "--------组件批量删除ids--------");
      this.$emit("handleBatchDelete", { ids: ids });
    },

    // 点击详情按钮触发方法
    handleDetail(row) {
      console.log(row, "-----------组件详情按钮---------");
      this.$emit("handleDetail", { row: row });
    },

    handleFirst(row) {
      console.log(row, "-----------组件初盘按钮---------");
      this.$emit("handleFirst", { row: row });
    },
    handleFinal(row) {
      console.log(row, "-----------组件复盘按钮---------");
      this.$emit("handleFinal", { row: row });
    },
    handleConfirm(row) {
      console.log(row, "-----------组件差异确认按钮---------");
      this.$emit("handleConfirm", { row: row });
    },

    // 点击自定义按钮触发方法
    handleCustom(row) {
      console.log(row, "-----------组件自定义按钮---------");
      this.$emit("handleCustom", { row: row });
    },

    // 选中列表中的选项触发
    selectionChange(selections) {
      this.selections = selections;
      this.$emit("selectionChange", { selections: selections });
    },

    // 切换请求条数变化的时候触发
    handleSizeChange(pageSize) {
      console.log(pageSize, "------请求条数发生变化------");
      this.$emit("handleSizeChange", { size: pageSize });
    },

    // 请求第几页的时候会触发
    handlePageChange(pageNum) {
      console.log(pageNum, "------请求页数发生变化------");
      this.$emit("handlePageChange", { number: pageNum });
    }
  }
};
</script>

<
<style  lang="scss" scoped>
  .table-wrap {
    width: 100%;
    height: auto;
  }
  .toolbar {
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
  }
  /deep/ .el-table .sort-caret.ascending {
    border-bottom-color: #FFF;
    top: 5px;
  }

  /deep/ .el-table .sort-caret.descending {
    border-top-color: #FFF;
    bottom: 7px;
  }

  /deep/ .el-table .ascending .sort-caret.ascending {
    border-bottom-color: #2F4554;
  }

  /deep/ .el-table .descending .sort-caret.descending {
    border-top-color: #2F4554;
  }
</style>
